<template>
  <div class="mvlist">
      <ul>
          <li v-for="(item,index) in mvlist" :key="index">
              <img :src="item.picurl" alt="" @click="mvtarg(item.vid)">
              <p>{{item.mvtitle}}</p>
              <p v-for="(item1,index) in item.singers" :key="index">{{item1.name}}</p>
          </li>
    
      </ul>
  </div>
</template>

<script>
import {mvlist} from '../../api/mv'
export default {
    data(){
        return {
            mvlist:[],
            id:'1',
        }
    },
   
    
    methods:{
        mv(){
            this.axios.get(`${mvlist}/new/mv/?type=${this.id}`).then(res=>{
                // console.log(res.data.data.list);
                this.mvlist=res.data.data.list
            }).catch(err=>{
                console.log(err);
            })
        },
        mvtarg(i){
            console.log(i);
            this.$router.push({
                path:'/mvdetail',
                query:{
                    vid:i
                }
            })
        }
    },
    created(){
       this. mv()
          this.id=this.$route.query.sid
              
    },
    watch:{
        $route(){
            if(this.$route.query.sid){
                   this. mv()
                   this.id=this.$route.query.sid
            }
        }
    }


}
</script>

<style lang="scss" scoped>
.mvlist{
    width: 1400px;
    margin: 0 auto;
    ul{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        li{
            i{
                color: #666;
            }
            p{
                width: 250px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
            img{
                width: 250px;
                height: 150px;
            }
        }
    }
}
</style>